<template>
<section class="groomwrap clearfix">
    <div class="groom">
      <a href="/video/av11327308" target="_blank" title="【手书在现】那什么的少女前线">
        <div class="lazy-img">
          <img src="//i0.hdslb.com/bfs/archive/a9c085b2b497867b970b43b19a0923915ee0c694.jpg@320w_200h.webp" alt="【手书在现】那什么的少女前线"/>
        </div>
        <div class="card-mark">
          <p class="title">【手书在现】那什么的少女前线</p>
          <p class="author">up主：苏初雨</p>
          <p class="play">播放：1.5万</p>
        </div>
      </a>
      <div class="watch-later-trigger w-later"></div>
    </div>
    <div class="groom">
      <a href="/video/av11327308" target="_blank" title="【手书在现】那什么的少女前线">
        <div class="lazy-img">
          <img src="//i0.hdslb.com/bfs/archive/a9c085b2b497867b970b43b19a0923915ee0c694.jpg@320w_200h.webp" alt="【手书在现】那什么的少女前线"/>
        </div>
        <div class="card-mark">
          <p class="title">【手书在现】那什么的少女前线</p>
          <p class="author">up主：苏初雨</p>
          <p class="play">播放：1.5万</p>
        </div>
      </a>
      <div class="watch-later-trigger w-later"></div>
    </div>
    <div class="groom">
      <a href="/video/av11327308" target="_blank" title="【手书在现】那什么的少女前线">
        <div class="lazy-img">
          <img src="//i0.hdslb.com/bfs/archive/a9c085b2b497867b970b43b19a0923915ee0c694.jpg@320w_200h.webp" alt="【手书在现】那什么的少女前线"/>
        </div>
        <div class="card-mark">
          <p class="title">【手书在现】那什么的少女前线</p>
          <p class="author">up主：苏初雨</p>
          <p class="play">播放：1.5万</p>
        </div>
      </a>
      <div class="watch-later-trigger w-later"></div>
    </div>
    <div class="groom">
      <a href="/video/av11327308" target="_blank" title="【手书在现】那什么的少女前线">
        <div class="lazy-img">
          <img src="//i0.hdslb.com/bfs/archive/a9c085b2b497867b970b43b19a0923915ee0c694.jpg@320w_200h.webp" alt="【手书在现】那什么的少女前线"/>
        </div>
        <div class="card-mark">
          <p class="title">【手书在现】那什么的少女前线</p>
          <p class="author">up主：苏初雨</p>
          <p class="play">播放：1.5万</p>
        </div>
      </a>
      <div class="watch-later-trigger w-later"></div>
    </div>
    <div class="groom">
      <a href="/video/av11327308" target="_blank" title="【手书在现】那什么的少女前线">
        <div class="lazy-img">
          <img src="//i0.hdslb.com/bfs/archive/a9c085b2b497867b970b43b19a0923915ee0c694.jpg@320w_200h.webp" alt="【手书在现】那什么的少女前线"/>
        </div>
        <div class="card-mark">
          <p class="title">【手书在现】那什么的少女前线</p>
          <p class="author">up主：苏初雨</p>
          <p class="play">播放：1.5万</p>
        </div>
      </a>
      <div class="watch-later-trigger w-later"></div>
    </div>
    <div class="groom">
      <a href="/video/av11327308" target="_blank" title="【手书在现】那什么的少女前线">
        <div class="lazy-img">
          <img src="//i0.hdslb.com/bfs/archive/a9c085b2b497867b970b43b19a0923915ee0c694.jpg@320w_200h.webp" alt="【手书在现】那什么的少女前线"/>
        </div>
        <div class="card-mark">
          <p class="title">【手书在现】那什么的少女前线</p>
          <p class="author">up主：苏初雨</p>
          <p class="play">播放：1.5万</p>
        </div>
      </a>
      <div class="watch-later-trigger w-later"></div>
    </div>
    <span class="rec-btn prev">昨日</span>
    <span class="rec-btn next">昨日</span>
</section>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    };
  }
};
</script>
<style lang="stylus" scoped>
.groom
  width 160px
  height 100px
  position relative
  overflow hidden
  border-radius 4px
  background #fff
.groomwrap
  position relative
  height 220px
  overflow hidden
  &:hover
    .rec-btn
      opacity 1
  .groom
    float left
    margin 0 0 20px 20px
    &:hover
      .card-mark
        height 100%
        top 0
        background rgba(0,0,0,0.6)
      .author,
      .play
        opacity 1
      .watch-later-trigger
        opacity 1
        visibility visible
  .rec-btn
    opacity 0
    position absolute
    background-color rgba(0,0,0,.6)
    background-image url(../../../static/images/icons2.324edea.png)
    background-repeat no-repeat
    width 20px
    top 50%
    margin-top -28px
    cursor pointer
    font-size 12px
    color #fff
    text-align center
    transition all .3s
  .prev
    left 20px
    border-radius 0 4px 4px 0
    padding 13px 5px 13px 10px
    background-position 6px -1211px
  .next
    right 0
    border-radius 4px 0 0 4px
    padding 13px 10px 13px 5px
    background-position 25px -1262px
.lazy-img
  width 100%
  height 100%
  display inline-block
  background: url(../../../static/images/img_loading.a351656.png) 50% no-repeat;
  img
    display block
    width 100%
    height 100%
.card-mark
  position absolute
  left 0
  top 68px
  width 150px
  font-size 12px
  height 20px
  line-height 20px
  padding 10px 5px
  overflow hidden
  background #000
  background linear-gradient(transparent,rgba(0,0,0,.1) 20%,rgba(0,0,0,.2) 35%,rgba(0,0,0,.6) 65%,rgba(0,0,0,.9))

  .title
    color #fff
    height 40px
    overflow hidden
    margin-bottom 5px
  .author,
  .play
    color #99a2aa
    height 20px
    line-height 20px
    overflow hidden
    transition all .6s
    opacity 0
.watch-later-trigger
  width 22px
  height 22px
  position absolute
  right 6px
  bottom 4px
  cursor pointer
  opacity 0
  visibility hidden
  background url(../../assets/images/watchlater.png)
</style>
